<script setup>
import { onMounted, reactive, getCurrentInstance, ref,watch } from 'vue'
import WangEditor from 'wangeditor'
import axios from '@/utils/axios'
import { ElMessage } from 'element-plus'
import { Plus, Delete,Calendar, Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const input1 = ref('')
const router = useRouter()
const state = reactive({
    loading: false,
    tableData: [], // 数据列表
    total: 0, // 总条数
    currentPage: 1, // 当前页
    pageSize: 10, // 分页大小
    showEditRoleDialog: false,
    topic_id: ''
})

const tableRef = ref();

onMounted(()=>{
    getPostsList();
})
const getPostsList = (query = '') => {
    state.loading = true // 加载的动画图标显示
    axios.get("/topics/page", {
        params: {
            page: state.currentPage,
            limit: state.pageSize,
            query: query
        }
    }).then(res => {
        state.tableData = res.records;
        state.total = res.total;
        state.loading = false;
    }).catch(() => {
        state.loading = false;
    })
}
// 监听输入框的变化
watch(input1, (newVal) => {
    if (newVal.trim() !== '') {
        getPostsList(newVal);
    } else {
        getPostsList('');
    }
});

const changePage = (val) => {
    state.currentPage = val
    getPostsList(input1.value);
}
const handleStatus = (topic_id) => {
    axios.get("/topics/del?topic_id="+topic_id).then(() => {
        ElMessage.success('删除成功!')
        getPostsList()
    })
}
const delMulti = () => {
    const selectAry = tableRef.value.getSelectionRows();
    let ids = selectAry.map( item => item.topic_id);
    console.log(ids);
    axios.post("/topics/delMult", ids).then(res=>{
        if(res==0){
            ElMessage({
                message:"批量删除成功!",
                type:"success",//消息窗口中的样式类型
                duration:2000,//消息窗口关闭后的回调函数
            })
            getPostsList();
        }
    })
}

</script>

<template>
<el-card class="good-container">
    <template #header>
        <div class="header">
                <el-button type="primary" 
                :icon="Plus" @click="delMulti">批量删除</el-button> <el-input v-model="input1" style="width: 240px" 
                placeholder="请输入你要搜索的内容":prefix-icon="Search"/>
            </div>
        </template>
        <el-table ref="tableRef"  :load="state.loading" :data="state.tableData" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" width="60" fixed="left"></el-table-column>
            
            <el-table-column prop="topic_id" label="话题编号">
            </el-table-column>
            <el-table-column prop="name" label="话题名">
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <a style="cursor: pointer; margin-right: 10px"
                        @click="handleStatus(scope.row.topic_id)">删除</a>
                </template>
            </el-table-column>
        </el-table>
        <!--总数超过一页，再展示分页器-->
        <el-pagination background layout="prev, pager, next" :total="state.total"
         :page-size="state.pageSize"
            :current-page="state.currentPage" @current-change="changePage" />
    </el-card>
    
</template>

<style scoped>
.good-container {
    min-height: 100%;
}

.el-card.is-always-shadow {
    min-height: 100% !important;}
</style>